<template>
	<view>
		<view class="top-box" :style="{paddingTop:(statusBarHeight + 10)+'px'}">
			<!-- <image src="../../static/big-top.jpg" class="top-img" mode=""></image> -->
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item" class="top-img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="item-box">
				<view class="item" v-for="(item,index) in itemList" :key="index" @click="jump(item)">
					<view class="item-img ">
						<image :src="item.img" class="imgs" mode="aspectFit"></image>
					</view>
					
					<view class="item-name-wrap">
						<view class="item-name" :class="item.openUp?'':'item-name-open'">
							{{item.name}}
						</view>
						<view class="item-time" v-if="item.time">
							开放时间:{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:20,
				itemList:[
					{img:'../../static/index/index_notice.jpg',name:'比赛通知',type:1,openUp:true},
					{img:'../../static/index/index_answer.jpg',name:'线上答题',type:2,openUp:true},
					{img:'../../static/index/index_match1.jpg',name:'专场赛：区县系统',time:'2022年5月25日',type:3,openUp:true},
					{img:'../../static/index/index_match2.jpg',name:'专场赛：高校系统',time:'2022年6月15日',type:4,openUp:true},
					{img:'../../static/index/index_match3.jpg',name:'专场赛：城市系统',time:'2022年6月24日',type:5,openUp:true},
					{img:'../../static/index/index_final.jpg',name:'总决赛',type:6,openUp:true},
					{img:'../../static/index/index_review.jpg',name:'精彩回顾',type:7,openUp:true},
					{img:'../../static/index/index_all_review.jpg',name:'历届比赛回顾',type:8,openUp:true}
				],
				banner:[]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=>{
					this.statusBarHeight = res.statusBarHeight;
				}
			});
			this.getBanner();
		},
		methods: {
			getBanner(){
				this.$http('/martial_api/Setting/rotationChart.html').then(res=>{
					console.log(res);
					this.banner = res.data;
				})
			},
			jump(item){
				const {type,name,openUp} = item;
				if(openUp){
					switch(type){
						case 1:uni.navigateTo({url:'/pages/sub/notice?type=1&title='+name}); break;
						case 2:	
								// uni.setStorageSync('live_img','https://mp.weixin.qq.com/s/aOdNGAvg3NdN_zqcwkqu3Q');
								// uni.navigateTo({url:'/pages/sub/web'}); 
								location.href = 'https://mp.weixin.qq.com/s/aOdNGAvg3NdN_zqcwkqu3Q';
								break;
						case 3:uni.navigateTo({url:'/pages/sub/sub?type=1&title='+name}); break;
						case 4:uni.navigateTo({url:'/pages/sub/sub?type=2&title='+name}); break;
						case 5:uni.navigateTo({url:'/pages/sub/sub?type=3&title='+name}); break;
						case 6:uni.navigateTo({url:'/pages/sub/sub?type=0&title='+name}); break;
						case 7:uni.navigateTo({url:'/pages/sub/review'}); break;
						case 8:uni.navigateTo({url:'/pages/sub/notice?type=2&title='+name});
					}
				}else{
					uni.showToast({
						title:'暂未开放!',
						icon:"error"
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #f5f5f5;
	}
	.top-box{
		// padding: 0 20upx;
	}
	.swiper{
		width: 100%;
		height: 340upx;
	}
	.top-img{
		width: 100%;
		height: 340upx;
	}
	.item{
		margin-bottom: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		border-radius: 20upx;
		padding: 25upx 0;
		box-shadow: 0px 0px 8px #cccccc;
	}
	.item-img{
		width: 62upx;
		height: 62upx;
		margin-right: 20upx;
	}
	.imgs{
		width: 100%;
		height: 100%;
	}
	.item-name-wrap{
		width: 50%;
		text-align: center;
	}
	.item-name{
		
		color: #ef8200;
		font-size: 30upx;
		font-weight:550;
		
	}
	.item-name-open{
		color: #999;
	}
	.item-time{
		font-size: 24upx;
		color: #999;
		margin-top: 10upx;
	}
</style>
